<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$agency->webname}注册</title>
    <link rel="stylesheet" type="text/css" href="./css/public.css">
    <style type="text/css">
        html{
            height: 100%;
        }
        body{
            background: url(http://weidogstest.oss-cn-beijing.aliyuncs.com/949c6004e2ceb22f5fde1f650befa0fa.png) top left no-repeat;
            background-size: cover;
            overflow: hidden;
            height: 100%;
        }
        .public_header_content img{
            margin-top: 7px;
            margin-left: 40px;
        }
        .register_main_container{
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -190px;
            margin-top: -255px;
            box-sizing: border-box;
            width: 380px;
            height: 510px;
            padding: 30px 30px 40px;
            background: #fff;
            box-shadow: 0 20px 30px 0 rgba(63,63,65,.06);
            border-radius: 10px;
        }
        .register_mainHeader_container{
            margin-bottom: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .register_mainHeader_container h3{
            color: #2589ff;
            font-size: 20px;
        }
        .register_mainHeader_container a{
            color: #9797a1;
            font-size: 14px;
        }
        .register_mainList_container{

        }
        .register_mainList_container li{
            position: relative;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #e3e3e3;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }
        .register_mainList_container li span{
            width: 70px;
            color: #595961;
            font-size: 14px;
            margin-right: 10px;
        }
        .register_mainList_container li input{
            border: 0;
            outline: 0;
            font-size: 14px;
            color: #595961;
            flex: 1;
        }
        .login_verification_code_button{
            color: #2589ff !important;
            width: 70px;
            font-size: 13px !important;
            cursor: pointer;
            background: #fff
        }
        .register_mainList_container li img{
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        .register_mainButton_contaniner button{
            display: block;
            width: 320px;
            height: 50px;
            text-align: center;
            color: #fff;
            background: #2589ff;
            border-radius: 6px;
            font-size: 16px;
            border: 0;
            outline: 0;
            margin-top: 40px;
            cursor: pointer;
        }
        .register_mainButton_contaniner{
            bottom: 35px;
            position: absolute;
        }
        .register_mainHeader_content{
            display: flex;
            align-items: center;
        }
        .register_mainHeader_content a{
            color: #9797a1;
            font-size: 14px;
        }
        .register_mainHeader_content img{
            width: 9px;
            height: 14px;
            margin-left: 5px;
        }
        /*底部*/
        .publiclogin_footer_container{
            display: flex;
            justify-content: center;
            align-items: center;
            color: #9797a1;
            font-size: 12px;
            position: absolute;
            bottom: 15px;
            left: 0;
            right: 0;
        }
        .publiclogin_footer_container p{

        }
        .publiclogin_footer_container a{
            color: #9797a1;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<!-- 头部 -->
<div class="public_header_contaienr">
    <div class="public_header_content">
        <img src="{$agency->logo}">
    </div>
</div>
<!-- 注册部分 -->
<div class="register_main_container">
    <div class="register_main_content">
        <div class="register_mainHeader_container">
            <h3>注册</h3>
            <div class="register_mainHeader_content">
                <a href="login.html">登录</a>
                <img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/70c5a4141731f36e65c24a95d8a2b390.png">
            </div>

        </div>

        <form action="" method="post" >
        <ul class="register_mainList_container">
            <input type="text" name="register" value="register" style="display:none;" />
            <li>
                <span>手机号码</span>
                <input type="text" name="telephone" placeholder="以后可以用手机号登录" id="Phone_numbera">
            </li>
            {if $register_check == 1}
            <li>
                <span>短信验证码</span>
                <input type="text" name="yzm" id="yzm" placeholder="请填写短信验证码">
                <input type="button" value="获取验证码" name="yzm" id="Verification_code" onclick="return codes()" class="login_verification_code_button">
            </li>
            {/if}
            <li>
                <span>设置密码</span>
                <input type="password" name="pwd" placeholder="8-16位必须包含数字和字母" id="pwd">
                <img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/c414199122ddcfb6b827da8fb2e16422.png" id="pwdiconshow">
                <img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/c61fd02f0e29d3e0673b90db62974484.png" style="display: none;" id="pwdiconhide">
            </li>
        </ul>
        <div class="register_mainButton_contaniner">
            <button onclick="return check()">注册</button>
        </div>
        </form>
    </div>
</div>
<div class="publiclogin_footer_container">
    Copyright (c)2018-2020{$agency->company_name}&nbsp旗下&nbsp{$agency->webname}&nbsp版权所有<span class="mark">|</span>
    <a href="https://beian.miit.gov.cn">{$agency->record_number}</a><br/>
</div>
</body>
<script src="layui/layui.all.js"></script>
<script src="red/lib/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
function check(){
    // 获取验证码 判断手机号
        var phoneNum = $('#Phone_numbera').val();
        var pwd = $('#pwd').val();
        var yzm = $('#yzm').val();
        if(phoneNum==""){
            alert('手机号码不能为空');
            return false;
        }
        if(phoneNum.length!=11){
            alert('请输入十一位手机号');
            return false;
        }
        if(pwd==""){
            alert('密码不能为空');
            return false;
        }
        if(yzm==""){
            alert('验证码不能为空');
            return false;
        }


};

$("#pwdiconhide").click(function(){
    $(this).hide();
    $("#pwdiconshow").show();
    $("#pwd").attr('type','password')
})
$("#pwdiconshow").click(function(){
    $(this).hide();
    $("#pwdiconhide").show();
    $("#pwd").attr('type','text')
})


function codes(){
    $Verification_code = $('#Verification_code');
    var phoneNum = $('#Phone_numbera').val();
    var tel = $('#Phone_numbera').val();
    if(tel==''){
        alert('手机号不能为空');
        return false;
    }
    if(tel.length!=11){
        alert('手机号需11位');
        return false;
    }
    layer.open({
        title: '验证码'
        ,shadeClose:true
        ,content: '<p><input class="input_short_H" style="width:70%" type="text" id="cikle" name="cikle" placeholder="请输入右侧验证码"><img class="inputImg_H" style="-webkit-user-select: none" src="captcha.html"></p>',
        yes: function(index, layero){
            var check=$("#cikle").val();
            if(check==''){
                alert('请先输入验证码');
            }else{
                $.get("/sendcode.html",{
                    tel:tel,check:check},function(data){
                    if(data.msg=='ok'){
                        alert("短信发送成功");
                        var second = 60;
                        $Verification_code.val(second + '秒后重发');
                        $Verification_code.attr("disabled",'disabled');
                        var second_60 = setInterval(function(){
                            second--;
                            $Verification_code.val(second + '秒后重发');
                        },1000);
                        setTimeout(function(){
                            $Verification_code.val('获取验证码');
                            $Verification_code.removeAttr("disabled");
                            clearInterval(second_60);
                        },60000);
                    }else if(data.msg=='error'){
                        alert("验证码错误");
                    }else if(data.msg=='errors'){
                        alert("您已注册");
                    }else{
                        alert("手机号码有误或系统出错，请重试");
                    }
                })
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        }
    });
}

</script>
</html>